{% extends 'base.html' %}
{% load static %}

{% block title %}世界杯列表 - Creeps Judge{% endblock %}

{% block extra_css %}
<link href="{% static 'css/worldcup.css' %}" rel="stylesheet">
<style>
    .container {
        background: transparent;
        backdrop-filter: none;
        border-radius: 0;
        padding: 0;
        margin-top: 20px;
        margin-bottom: 20px;
        box-shadow: none;
        border: none;
        color: rgba(255, 255, 255, 0.9);
    }

    .worldcup-card {
        background: linear-gradient(135deg, rgba(0, 0, 0, 0.8) 0%, rgba(30, 30, 60, 0.9) 100%);
        backdrop-filter: blur(15px);
        border-radius: 20px;
        border: 2px solid rgba(255, 215, 0, 0.5);
        margin-bottom: 25px;
        transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
        position: relative;
        overflow: hidden;
        box-shadow:
            0 8px 32px rgba(0, 0, 0, 0.3),
            0 0 20px rgba(255, 215, 0, 0.2),
            inset 0 0 15px rgba(255, 255, 255, 0.05);
        will-change: transform;
    }

    .worldcup-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
        transition: left 0.5s ease;
    }

    .worldcup-card:hover {
        transform: translateY(-6px);
        border-color: rgba(255, 215, 0, 0.8);
        box-shadow:
            0 12px 40px rgba(0, 0, 0, 0.4),
            0 0 30px rgba(255, 215, 0, 0.3),
            inset 0 0 20px rgba(255, 255, 255, 0.08);
    }

    .worldcup-card:hover::before {
        left: 100%;
    }

    .worldcup-header {
        padding: 20px 25px 15px;
        border-bottom: 1px solid rgba(255, 215, 0, 0.3);
        position: relative;
    }

    .worldcup-title {
        font-size: 1.4rem;
        font-weight: 700;
        color: #FFD700;
        margin: 0;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    }

    .worldcup-status {
        display: inline-block;
        padding: 4px 12px;
        border-radius: 12px;
        font-size: 0.85rem;
        font-weight: 600;
        margin-top: 8px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .status-preparing {
        background: linear-gradient(135deg, #FFA500, #FF8C00);
        color: white;
        box-shadow: 0 2px 8px rgba(255, 165, 0, 0.3);
    }

    .status-ready {
        background: linear-gradient(135deg, #28a745, #20c997);
        color: white;
        box-shadow: 0 2px 8px rgba(40, 167, 69, 0.3);
    }

    .status-regular_season {
        background: linear-gradient(135deg, #32CD32, #228B22);
        color: white;
        box-shadow: 0 2px 8px rgba(50, 205, 50, 0.3);
    }

    .status-championship_ready {
        background: linear-gradient(135deg, #FFD700, #FFA500);
        color: #212529;
        box-shadow: 0 2px 8px rgba(255, 215, 0, 0.4);
        animation: pulse 2s infinite;
    }

    .status-championship {
        background: linear-gradient(135deg, #FF6347, #DC143C);
        color: white;
        box-shadow: 0 2px 8px rgba(255, 99, 71, 0.3);
    }

    .status-finished {
        background: linear-gradient(135deg, #9370DB, #8A2BE2);
        color: white;
        box-shadow: 0 2px 8px rgba(147, 112, 219, 0.3);
    }

    @keyframes pulse {
        0%, 100% {
            transform: scale(1);
            box-shadow: 0 2px 8px rgba(255, 215, 0, 0.4);
        }
        50% {
            transform: scale(1.05);
            box-shadow: 0 4px 16px rgba(255, 215, 0, 0.6);
        }
    }

    /* 冠军展示区域样式 */
    .champion-showcase {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 20px 25px;
        background: linear-gradient(135deg, rgba(255, 215, 0, 0.1) 0%, rgba(255, 165, 0, 0.15) 100%);
        border-top: 1px solid rgba(255, 215, 0, 0.3);
        border-bottom: 1px solid rgba(255, 215, 0, 0.3);
        position: relative;
        overflow: hidden;
        animation: championGlow 3s ease-in-out infinite;
    }

    .champion-showcase::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.2), transparent);
        animation: championShine 4s ease-in-out infinite;
    }

    .champion-crown {
        font-size: 2.5rem;
        margin-right: 15px;
        animation: crownFloat 2s ease-in-out infinite;
        filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.8));
    }

    .champion-info {
        flex: 1;
        text-align: center;
    }

    .champion-label {
        font-size: 0.9rem;
        color: rgba(255, 215, 0, 0.8);
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 1px;
        margin-bottom: 5px;
    }

    .champion-name {
        font-size: 1.6rem;
        font-weight: 700;
        color: #FFD700;
        text-shadow: 0 2px 8px rgba(255, 215, 0, 0.5);
        margin-bottom: 8px;
        animation: championPulse 2.5s ease-in-out infinite;
    }

    .champion-stats {
        font-size: 0.85rem;
        color: rgba(255, 255, 255, 0.8);
        background: rgba(0, 0, 0, 0.3);
        padding: 5px 12px;
        border-radius: 15px;
        display: inline-block;
    }

    .champion-trophy {
        font-size: 2.5rem;
        margin-left: 15px;
        animation: trophyRotate 3s ease-in-out infinite;
        filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.8));
    }

    @keyframes championGlow {
        0%, 100% {
            box-shadow: inset 0 0 20px rgba(255, 215, 0, 0.1);
        }
        50% {
            box-shadow: inset 0 0 30px rgba(255, 215, 0, 0.2);
        }
    }

    @keyframes championShine {
        0% {
            left: -100%;
        }
        50% {
            left: 100%;
        }
        100% {
            left: 100%;
        }
    }

    @keyframes crownFloat {
        0%, 100% {
            transform: translateY(0px) rotate(0deg);
        }
        50% {
            transform: translateY(-5px) rotate(5deg);
        }
    }

    @keyframes championPulse {
        0%, 100% {
            transform: scale(1);
            text-shadow: 0 2px 8px rgba(255, 215, 0, 0.5);
        }
        50% {
            transform: scale(1.05);
            text-shadow: 0 4px 16px rgba(255, 215, 0, 0.8);
        }
    }

    @keyframes trophyRotate {
        0%, 100% {
            transform: rotate(0deg) scale(1);
        }
        25% {
            transform: rotate(-10deg) scale(1.1);
        }
        75% {
            transform: rotate(10deg) scale(1.1);
        }
    }

    .worldcup-body {
        padding: 20px 25px;
    }

    .worldcup-info {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 15px;
        margin-bottom: 20px;
    }

    .info-item {
        text-align: center;
        padding: 12px;
        background: rgba(255, 255, 255, 0.05);
        border-radius: 10px;
        border: 1px solid rgba(255, 215, 0, 0.2);
    }

    .info-label {
        font-size: 0.85rem;
        color: rgba(255, 255, 255, 0.7);
        margin-bottom: 5px;
    }

    .info-value {
        font-size: 1.2rem;
        font-weight: 700;
        color: #FFD700;
    }

    .worldcup-actions {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
    }

    .btn-worldcup {
        padding: 10px 20px;
        border: none;
        border-radius: 8px;
        font-weight: 600;
        text-decoration: none;
        transition: all 0.3s ease;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-size: 0.9rem;
    }

    .btn-primary {
        background: linear-gradient(135deg, #007bff, #0056b3);
        color: white;
        box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3);
    }

    .btn-primary:hover {
        background: linear-gradient(135deg, #0056b3, #004085);
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(0, 123, 255, 0.4);
        color: white;
        text-decoration: none;
    }

    .btn-success {
        background: linear-gradient(135deg, #28a745, #1e7e34);
        color: white;
        box-shadow: 0 4px 12px rgba(40, 167, 69, 0.3);
    }

    .btn-success:hover {
        background: linear-gradient(135deg, #1e7e34, #155724);
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(40, 167, 69, 0.4);
        color: white;
        text-decoration: none;
    }

    .btn-warning {
        background: linear-gradient(135deg, #ffc107, #e0a800);
        color: #212529;
        box-shadow: 0 4px 12px rgba(255, 193, 7, 0.3);
    }

    .btn-warning:hover {
        background: linear-gradient(135deg, #e0a800, #d39e00);
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(255, 193, 7, 0.4);
        color: #212529;
        text-decoration: none;
    }

    .btn-info {
        background: linear-gradient(135deg, #17a2b8, #138496);
        color: white;
        box-shadow: 0 4px 12px rgba(23, 162, 184, 0.3);
    }

    .btn-info:hover {
        background: linear-gradient(135deg, #138496, #117a8b);
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(23, 162, 184, 0.4);
        color: white;
        text-decoration: none;
    }

    .btn-danger {
        background: linear-gradient(135deg, #dc3545, #c82333);
        color: white;
        box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3);
        border: none;
        cursor: pointer;
    }

    .btn-danger:hover {
        background: linear-gradient(135deg, #c82333, #bd2130);
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(220, 53, 69, 0.4);
        color: white;
        text-decoration: none;
    }

    .page-header {
        text-align: center;
        margin-bottom: 40px;
        padding: 30px 0;
        background: linear-gradient(135deg, rgba(255, 215, 0, 0.1), rgba(255, 215, 0, 0.05));
        border-radius: 20px;
        border: 1px solid rgba(255, 215, 0, 0.3);
    }

    .page-title {
        font-size: 2.5rem;
        font-weight: 800;
        color: #FFD700;
        margin: 0;
        text-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
    }

    .page-subtitle {
        font-size: 1.1rem;
        color: rgba(255, 255, 255, 0.8);
        margin: 10px 0 0;
    }

    /* 模态框样式 */
    .modal {
        position: fixed;
        z-index: 1000;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.7);
        backdrop-filter: blur(5px);
    }

    .modal-content {
        background: linear-gradient(135deg, rgba(0, 0, 0, 0.9) 0%, rgba(30, 30, 60, 0.95) 100%);
        margin: 15% auto;
        padding: 0;
        border: 2px solid rgba(220, 53, 69, 0.5);
        border-radius: 15px;
        width: 90%;
        max-width: 500px;
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
        animation: modalSlideIn 0.3s ease-out;
    }

    @keyframes modalSlideIn {
        from {
            opacity: 0;
            transform: translateY(-50px) scale(0.9);
        }
        to {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
    }

    .modal-header {
        padding: 20px 25px;
        background: linear-gradient(135deg, rgba(220, 53, 69, 0.8), rgba(200, 35, 51, 0.9));
        border-radius: 13px 13px 0 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: white;
    }

    .modal-header h3 {
        margin: 0;
        font-size: 1.3rem;
        font-weight: 600;
    }

    .modal-close {
        font-size: 28px;
        font-weight: bold;
        cursor: pointer;
        color: rgba(255, 255, 255, 0.8);
        transition: color 0.3s ease;
    }

    .modal-close:hover {
        color: white;
    }

    .modal-body {
        padding: 25px;
        color: rgba(255, 255, 255, 0.9);
        line-height: 1.6;
    }

    .modal-body p {
        margin: 0 0 15px 0;
    }

    .modal-footer {
        padding: 20px 25px;
        display: flex;
        gap: 15px;
        justify-content: flex-end;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
    }

    .btn {
        padding: 10px 20px;
        border: none;
        border-radius: 8px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s ease;
        font-size: 0.9rem;
    }

    .btn-secondary {
        background: linear-gradient(135deg, #6c757d, #5a6268);
        color: white;
        box-shadow: 0 4px 12px rgba(108, 117, 125, 0.3);
    }

    .btn-secondary:hover {
        background: linear-gradient(135deg, #5a6268, #495057);
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(108, 117, 125, 0.4);
    }

    .empty-state {
        text-align: center;
        padding: 60px 20px;
        background: rgba(255, 255, 255, 0.05);
        border-radius: 20px;
        border: 2px dashed rgba(255, 215, 0, 0.3);
    }

    .empty-icon {
        font-size: 4rem;
        color: rgba(255, 215, 0, 0.5);
        margin-bottom: 20px;
    }

    .empty-title {
        font-size: 1.5rem;
        color: rgba(255, 255, 255, 0.8);
        margin-bottom: 10px;
    }

    .empty-text {
        color: rgba(255, 255, 255, 0.6);
        font-size: 1rem;
    }

    .pagination {
        justify-content: center;
        margin-top: 40px;
    }

    .page-link {
        background: rgba(255, 255, 255, 0.1);
        border: 1px solid rgba(255, 215, 0, 0.3);
        color: rgba(255, 255, 255, 0.8);
        padding: 10px 15px;
        margin: 0 2px;
        border-radius: 8px;
        transition: all 0.3s ease;
    }

    .page-link:hover {
        background: rgba(255, 215, 0, 0.2);
        border-color: rgba(255, 215, 0, 0.5);
        color: #FFD700;
        text-decoration: none;
    }

    .page-item.active .page-link {
        background: linear-gradient(135deg, #FFD700, #FFA500);
        border-color: #FFD700;
        color: #000;
        font-weight: 600;
    }

    .page-item.disabled .page-link {
        background: rgba(255, 255, 255, 0.05);
        border-color: rgba(255, 255, 255, 0.1);
        color: rgba(255, 255, 255, 0.3);
    }
</style>
{% endblock %}

{% block content %}
{% csrf_token %}
<div class="container">
    <div class="page-header">
        <h1 class="page-title">🏆 世界杯比赛</h1>
        <p class="page-subtitle">参与激烈的世界杯比赛，与全球玩家一较高下</p>
    </div>

    {% if user.is_staff %}
    <div class="admin-controls" style="text-align: center; margin-bottom: 30px;">
        <a href="{% url 'battles:admin_worldcup_create' %}" class="btn btn-success" style="
            background: linear-gradient(135deg, #28a745, #20c997);
            color: white;
            padding: 12px 24px;
            border-radius: 10px;
            text-decoration: none;
            font-weight: 600;
            box-shadow: 0 4px 12px rgba(40, 167, 69, 0.3);
            transition: all 0.3s ease;
            display: inline-flex;
            align-items: center;
            gap: 8px;
        " onmouseover="this.style.transform='translateY(-2px)'; this.style.boxShadow='0 6px 16px rgba(40, 167, 69, 0.4)';" onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 4px 12px rgba(40, 167, 69, 0.3)';">
            <i class="fas fa-plus"></i>
            创建新的世界杯赛事
        </a>
    </div>
    {% endif %}

    {% if page_obj %}
        {% for worldcup in page_obj %}
        <div class="worldcup-card">
            <div class="worldcup-particles"></div>
            <div class="worldcup-header">
                <h3 class="worldcup-title">
                    <i class="fas fa-globe worldcup-icon"></i>
                    {{ worldcup.name }}
                </h3>
                <span class="worldcup-status status-{{ worldcup.status }}">
                    {% if worldcup.status == 'preparing' %}
                        🔧 准备中
                    {% elif worldcup.status == 'ready' %}
                        ✅ 参赛名单确认准备就绪
                    {% elif worldcup.status == 'regular_season' %}
                        ⚔️ 常规赛进行中
                    {% elif worldcup.status == 'regular_finished' %}
                        🎯 常规赛已结束
                    {% elif worldcup.status == 'championship_ready' %}
                        🏆 冠军赛准备就绪
                    {% elif worldcup.status == 'championship' %}
                        🏆 冠军赛进行中
                    {% elif worldcup.status == 'finished' %}
                        {% if worldcup.championship_started_at %}
                            🏆 冠军赛已结束
                        {% else %}
                            ✅ 已结束
                        {% endif %}
                    {% endif %}
                </span>
            </div>

            <!-- 冠军展示区域 -->
            {% if worldcup.status == 'finished' and worldcup.champion %}
            <div class="champion-showcase">
                <div class="champion-crown">👑</div>
                <div class="champion-info">
                    <div class="champion-label">冠军</div>
                    <div class="champion-name">{{ worldcup.champion.user.username }}</div>
                    <div class="champion-stats">
                        常规赛: {{ worldcup.champion.wins }}胜 {{ worldcup.champion.losses }}负 | 积分: {{ worldcup.champion.total_score }}
                    </div>
                </div>
                <div class="champion-trophy">🏆</div>
            </div>
            {% endif %}

            <div class="worldcup-body">
                <div class="worldcup-info">
                    <div class="info-item">
                        <div class="info-label">参赛人数</div>
                        <div class="info-value">{{ worldcup.participants.count }}</div>
                    </div>
                    <div class="info-item">
                        <div class="info-label">创建时间</div>
                        <div class="info-value">{{ worldcup.created_at|date:"m-d H:i" }}</div>
                    </div>
                    {% if worldcup.regular_season_started_at %}
                    <div class="info-item">
                        <div class="info-label">常规赛开始</div>
                        <div class="info-value">{{ worldcup.regular_season_started_at|date:"m-d H:i" }}</div>
                    </div>
                    {% endif %}
                    {% if worldcup.championship_started_at %}
                    <div class="info-item">
                        <div class="info-label">冠军赛开始</div>
                        <div class="info-value">{{ worldcup.championship_started_at|date:"m-d H:i" }}</div>
                    </div>
                    {% endif %}
                    {% if worldcup.status == 'finished' %}
                    <div class="info-item">
                        <div class="info-label">结束时间</div>
                        <div class="info-value">{{ worldcup.finished_at|date:"m-d H:i" }}</div>
                    </div>
                    {% endif %}
                </div>

                {% if worldcup.description %}
                <p style="color: rgba(255, 255, 255, 0.8); margin-bottom: 20px; line-height: 1.5;">
                    {{ worldcup.description }}
                </p>
                {% endif %}

                <div class="worldcup-actions">
                    <a href="{% url 'battles:worldcup_detail' worldcup.id %}" class="btn-worldcup btn-primary">
                        👀 查看详情
                    </a>

                    {% if worldcup.status == 'regular_season' or worldcup.status == 'regular_finished' or worldcup.status == 'championship_ready' or worldcup.status == 'championship' or worldcup.status == 'finished' %}
                    <a href="{% url 'battles:worldcup_regular_season' worldcup.id %}" class="btn-worldcup btn-success">
                        🥇 常规赛排行榜
                    </a>
                    {% endif %}

                    {% if worldcup.status == 'regular_season' or worldcup.status == 'regular_finished' or worldcup.status == 'championship_ready' or worldcup.status == 'championship' or worldcup.status == 'finished' %}
                    <a href="{% url 'battles:worldcup_battles' worldcup.id %}" class="btn-worldcup btn-info">
                        ⚔️ 常规赛对战记录
                    </a>
                    {% endif %}

                    {% if worldcup.status == 'championship_ready' or worldcup.status == 'championship' or worldcup.status == 'finished' %}
                    <a href="{% url 'battles:worldcup_championship' worldcup.id %}" class="btn-worldcup btn-warning">
                        🏆 冠军赛对战图
                    </a>
                    {% endif %}

                    {% if user.is_staff %}
                    <button class="btn-worldcup btn-danger delete-worldcup-btn" data-worldcup-id="{{ worldcup.id }}" data-worldcup-name="{{ worldcup.name }}">
                        🗑️ 删除
                    </button>
                    {% endif %}
                </div>
            </div>
        </div>
        {% endfor %}

        <!-- 分页 -->
        {% if page_obj.has_other_pages %}
        <nav aria-label="世界杯分页">
            <ul class="pagination">
                {% if page_obj.has_previous %}
                    <li class="page-item">
                        <a class="page-link" href="?page=1">首页</a>
                    </li>
                    <li class="page-item">
                        <a class="page-link" href="?page={{ page_obj.previous_page_number }}">上一页</a>
                    </li>
                {% else %}
                    <li class="page-item disabled">
                        <span class="page-link">首页</span>
                    </li>
                    <li class="page-item disabled">
                        <span class="page-link">上一页</span>
                    </li>
                {% endif %}

                {% for num in page_obj.paginator.page_range %}
                    {% if page_obj.number == num %}
                        <li class="page-item active">
                            <span class="page-link">{{ num }}</span>
                        </li>
                    {% elif num > page_obj.number|add:'-3' and num < page_obj.number|add:'3' %}
                        <li class="page-item">
                            <a class="page-link" href="?page={{ num }}">{{ num }}</a>
                        </li>
                    {% endif %}
                {% endfor %}

                {% if page_obj.has_next %}
                    <li class="page-item">
                        <a class="page-link" href="?page={{ page_obj.next_page_number }}">下一页</a>
                    </li>
                    <li class="page-item">
                        <a class="page-link" href="?page={{ page_obj.paginator.num_pages }}">末页</a>
                    </li>
                {% else %}
                    <li class="page-item disabled">
                        <span class="page-link">下一页</span>
                    </li>
                    <li class="page-item disabled">
                        <span class="page-link">末页</span>
                    </li>
                {% endif %}
            </ul>
        </nav>
        {% endif %}
    {% else %}
        <div class="empty-state">
            <div class="empty-icon">🏆</div>
            <h3 class="empty-title">暂无世界杯比赛</h3>
            <p class="empty-text">目前还没有创建任何世界杯比赛，请联系管理员创建比赛。</p>
        </div>
    {% endif %}
</div>

<!-- 删除确认模态框 -->
<div id="deleteConfirmModal" class="modal" style="display: none;">
    <div class="modal-content">
        <div class="modal-header">
            <h3>⚠️ 确认删除</h3>
            <span class="modal-close">&times;</span>
        </div>
        <div class="modal-body">
            <p>您确定要删除世界杯 "<span id="deleteWorldcupName"></span>" 吗？</p>
            <p style="color: #dc3545; font-weight: bold;">此操作不可撤销，将删除所有相关的比赛数据！</p>
        </div>
        <div class="modal-footer">
            <button id="confirmDeleteBtn" class="btn btn-danger">确认删除</button>
            <button id="cancelDeleteBtn" class="btn btn-secondary">取消</button>
        </div>
    </div>
</div>

<script>
// 创建粒子效果
function createParticles() {
    const particleContainers = document.querySelectorAll('.worldcup-particles');

    particleContainers.forEach(container => {
        // 清除现有粒子
        container.innerHTML = '';

        // 创建5个粒子
        for (let i = 0; i < 5; i++) {
            const particle = document.createElement('div');
            particle.className = 'worldcup-particle';

            // 随机位置
            particle.style.left = Math.random() * 100 + '%';
            particle.style.top = Math.random() * 100 + '%';

            // 随机动画延迟
            particle.style.animationDelay = Math.random() * 6 + 's';

            container.appendChild(particle);
        }
    });
}

// 添加卡片悬停效果
function addCardEffects() {
    const cards = document.querySelectorAll('.worldcup-card');

    cards.forEach(card => {
        card.addEventListener('mouseenter', function() {
            this.style.transform = 'translateY(-8px) scale(1.02)';
        });

        card.addEventListener('mouseleave', function() {
            this.style.transform = 'translateY(-6px) scale(1)';
        });
    });
}

// 状态标签动画
function addStatusAnimations() {
    const statusElements = document.querySelectorAll('.worldcup-status');

    statusElements.forEach(status => {
        status.addEventListener('mouseenter', function() {
            this.style.transform = 'scale(1.1)';
        });

        status.addEventListener('mouseleave', function() {
            this.style.transform = 'scale(1)';
        });
    });
}

// 删除功能相关变量
let currentDeleteWorldcupId = null;
let currentDeleteWorldcupName = null;

// 显示删除确认模态框
function showDeleteModal(worldcupId, worldcupName) {
    currentDeleteWorldcupId = worldcupId;
    currentDeleteWorldcupName = worldcupName;
    
    document.getElementById('deleteWorldcupName').textContent = worldcupName;
    document.getElementById('deleteConfirmModal').style.display = 'block';
}

// 隐藏删除确认模态框
function hideDeleteModal() {
    currentDeleteWorldcupId = null;
    currentDeleteWorldcupName = null;
    document.getElementById('deleteConfirmModal').style.display = 'none';
}

// 执行删除操作
function deleteWorldcup() {
    if (!currentDeleteWorldcupId) return;
    
    // 显示加载状态
    const confirmBtn = document.getElementById('confirmDeleteBtn');
    const originalText = confirmBtn.textContent;
    confirmBtn.textContent = '删除中...';
    confirmBtn.disabled = true;
    
    // 发送AJAX请求
    fetch(`/battles/worldcup/${currentDeleteWorldcupId}/delete/`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value
        },
        body: JSON.stringify({
            'worldcup_id': currentDeleteWorldcupId
        })
    })
    .then(response => {
        if (response.ok) {
            return response.json();
        } else {
            // 对于非200状态码，也尝试解析JSON响应体获取具体错误消息
            return response.json().then(errorData => {
                throw new Error(errorData.message || '删除失败');
            }).catch(() => {
                // 如果无法解析JSON，使用通用错误消息
                throw new Error('删除失败');
            });
        }
    })
    .then(data => {
        if (data.success) {
            // 删除成功，移除卡片并显示成功消息
            const worldcupCard = document.querySelector(`[data-worldcup-id="${currentDeleteWorldcupId}"]`).closest('.worldcup-card');
            worldcupCard.style.animation = 'fadeOut 0.5s ease-out';
            
            setTimeout(() => {
                worldcupCard.remove();
                showMessage('世界杯删除成功！', 'success');
                
                // 检查是否还有世界杯，如果没有则显示空状态
                const remainingCards = document.querySelectorAll('.worldcup-card');
                if (remainingCards.length === 0) {
                    location.reload(); // 重新加载页面显示空状态
                }
            }, 500);
            
            hideDeleteModal();
        } else {
            throw new Error(data.message || '删除失败');
        }
    })
    .catch(error => {
        console.error('删除错误:', error);
        showMessage('删除失败：' + error.message, 'error');
        
        // 恢复按钮状态
        confirmBtn.textContent = originalText;
        confirmBtn.disabled = false;
    });
}

// 显示消息提示
function showMessage(message, type) {
    // 创建消息元素
    const messageDiv = document.createElement('div');
    messageDiv.className = `message-toast message-${type}`;
    messageDiv.textContent = message;
    
    // 添加样式
    messageDiv.style.cssText = `
        position: fixed;
        top: 20px;
        right: 20px;
        padding: 15px 20px;
        border-radius: 8px;
        color: white;
        font-weight: 600;
        z-index: 1001;
        animation: slideInRight 0.3s ease-out;
        ${type === 'success' ? 'background: linear-gradient(135deg, #28a745, #20c997);' : 'background: linear-gradient(135deg, #dc3545, #c82333);'}
    `;
    
    document.body.appendChild(messageDiv);
    
    // 3秒后自动移除
    setTimeout(() => {
        messageDiv.style.animation = 'slideOutRight 0.3s ease-out';
        setTimeout(() => {
            if (messageDiv.parentNode) {
                messageDiv.parentNode.removeChild(messageDiv);
            }
        }, 300);
    }, 3000);
}

// 添加CSS动画
const style = document.createElement('style');
style.textContent = `
    @keyframes fadeOut {
        from { opacity: 1; transform: scale(1); }
        to { opacity: 0; transform: scale(0.8); }
    }
    
    @keyframes slideInRight {
        from { opacity: 0; transform: translateX(100%); }
        to { opacity: 1; transform: translateX(0); }
    }
    
    @keyframes slideOutRight {
        from { opacity: 1; transform: translateX(0); }
        to { opacity: 0; transform: translateX(100%); }
    }
`;
document.head.appendChild(style);

// 页面加载完成后初始化
document.addEventListener('DOMContentLoaded', function() {
    createParticles();
    addCardEffects();
    addStatusAnimations();

    // 每30秒重新创建粒子效果
    setInterval(createParticles, 30000);
    
    // 绑定删除按钮事件
    document.addEventListener('click', function(e) {
        if (e.target.classList.contains('delete-worldcup-btn')) {
            e.preventDefault();
            const worldcupId = e.target.getAttribute('data-worldcup-id');
            const worldcupName = e.target.getAttribute('data-worldcup-name');
            showDeleteModal(worldcupId, worldcupName);
        }
    });
    
    // 绑定模态框事件
    document.getElementById('confirmDeleteBtn').addEventListener('click', deleteWorldcup);
    document.getElementById('cancelDeleteBtn').addEventListener('click', hideDeleteModal);
    document.querySelector('.modal-close').addEventListener('click', hideDeleteModal);
    
    // 点击模态框背景关闭
    document.getElementById('deleteConfirmModal').addEventListener('click', function(e) {
        if (e.target === this) {
            hideDeleteModal();
        }
    });
});
</script>

{% endblock %}